<template>
  <div>
    <el-dialog v-bind="$attrs" :visible.sync="showDialog" v-on="$listeners" @open="onOpen" @close="onClose" title="添加学生">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="students" :rules="rules" size="medium" label-width="100px">
          <el-col :span="12">
            <el-form-item label="所在年级" prop="stuGrade">
              <el-select v-model="students.stuGrade" placeholder="请选择所在年级" clearable :style="{width: '100%'}">
                <el-option v-for="(item,index) in grades" :key="index" :label="item.gradeName"
                           :value="item.id" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属分院" prop="stuInstitute">
              <el-select v-model="students.stuInstitute" placeholder="请选择所属分院" clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item,index) in institutes" :key="index" :label="item.instituteName"
                           :value="item.id" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在专业" prop="stuSpecialty">
              <el-select v-model="students.stuSpecialty" placeholder="请选择所在专业" clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item,index) in specialties" :key="index" :label="item.specialtyName"
                           :value="item.id" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在班级" prop="stuClazz">
              <el-select v-model="students.stuClazz" placeholder="请选择所在班级" clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item,index) in clazzes" :key="index" :label="item.clazzName"
                           :value="item.id" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学号" prop="stuId">
              <el-input v-model="students.stuId" placeholder="请输入学号" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="stuName">
              <el-input v-model="students.stuName" placeholder="请输入姓名" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="stuGender">
              <el-radio-group v-model="students.stuGender" size="medium">
                <el-radio v-for="(item, index) in sexOptions" :key="index" :label="item.value"
                          :disabled="item.disabled">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学生电话" prop="stuPhone">
              <el-input v-model="students.stuPhone" placeholder="请输入学生电话" clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学生QQ" prop="stuQq">
              <el-input v-model="students.stuQq" placeholder="请输入学生QQ" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { saveStudent } from '../../../api/students'
export default {
  name: 'StudentsAdd',
  components: {},
  // 接受父组件传递的值
  props: {
    addOrUpdateVisible: {
      type: Boolean,
      default: false
    },
    grades: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: []
    },
    institutes: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: []
    },
    specialties: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: []
    },
    clazzes: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: []
    }
  },
  data () {
    return {
      students: {
        stuGrade: '',
        stuInstitute: '',
        stuSpecialty: '',
        stuClazz: '',
        stuId: '',
        stuName: '',
        stuGender: 0,
        stuPhone: '',
        stuQq: ''
      },
      // 控制弹出框显示隐藏
      showDialog: false,
      rules: {
        stuGrade: [{
          required: true,
          message: '请选择所在年级',
          trigger: 'change'
        }],
        stuInstitute: [{
          required: true,
          message: '请选择所属分院',
          trigger: 'change'
        }],
        stuSpecialty: [{
          required: true,
          message: '请选择所在专业',
          trigger: 'change'
        }],
        stuClazz: [{
          required: true,
          message: '请选择所在班级',
          trigger: 'change'
        }],
        stuId: [{
          required: true,
          message: '请输入学号',
          trigger: 'blur'
        }],
        stuName: [{
          required: true,
          message: '请输入姓名',
          trigger: 'blur'
        }],
        stuGender: [{
          required: true,
          message: '性别不能为空',
          trigger: 'change'
        }],
        stuPhone: [{
          required: false,
          message: '请输入学生电话',
          trigger: 'blur'
        }],
        stuQq: [{
          required: false,
          message: '请输入学生QQ',
          trigger: 'blur'
        }]
      },
      sexOptions: [{
        label: '男',
        value: 0
      }, {
        label: '女',
        value: 1
      }]
    }
  },
  computed: {},
  watch: {
    // 监听 addOrUpdateVisible 改变
    addOrUpdateVisible (oldVal, newVal) {
      this.showDialog = this.addOrUpdateVisible
    }
  },
  created () {},
  mounted () {},
  methods: {
    onOpen () {},
    onClose () {
      this.$refs.elForm.resetFields()
      this.$emit('changeShow', 'false')
    },
    close () {
      this.$emit('changeShow', 'false')
    },
    handelConfirm () {
      this.$refs.elForm.validate(valid => {
        if (!valid) {
          return
        }
        console.log(this.students)
        this.addStudent()
      })
    },
    // 添加学生
    async addStudent () {
      const { data: res } = await saveStudent(this.students)
      // eslint-disable-next-line eqeqeq
      if (res.code == 20000) {
        this.$notify.success({
          title: '操作成功',
          message: '学生添加成功'
        })
        // 关闭
        this.$emit('changeShow', 'false')
        this.students = {}
        // this.$parent.getStudentList();
        this.$emit('getStudentList')
        this.$emit('getInstitute')
        this.$emit('getSpecialty')
        this.$emit('getClazz')
        this.$emit('getGrade')
      } else {
        return this.$message.error('学生添加失败:' + res.message)
      }
    }
  }
}
</script>

<style scoped>

</style>
